<template>
  <div class="fillContainer">
    <div>
      <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button type="primary" size="small" icon="view" @click="handleAdd()">
            添加
          </el-button>
        </el-form-item>
      </el-form>
      <div id="search">
        <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
        <input class="user-btn" type="button" value="搜索">
      </div>

    </div>
    <div class="table_container">



      <el-table :data="info" style="width: 100%" max-height="500px" border min-width="1000px">
        <el-table-column type="index" label="序号" align='center' width="70%">
        </el-table-column>
        <el-table-column prop="title" label="标题" align='center' width="250%">
          <template slot-scope="scope">
            <span> {{ scope.row.knowtitle }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="详细内容" align='center' width="750%">
          <template slot-scope="scope">
            <span> {{ scope.row.know }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align='center' prop="operation" min-width="200px">
          <template slot-scope="scope">
            <el-button type="warning" size="small" icon="edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination v-if='paginations.total > 0' :page-sizes="paginations.page_sizes"
              :page-size="paginations.page_size" :layout="paginations.layout" :total="paginations.total"
              :current-page.sync='paginations.page_index' @current-change='handleCurrentChange'
              @size-change='handleSizeChange'>
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>


    <Dialog :dialog="dialog" :formData="formData"></Dialog>
  </div>
</template>

<script>
  import axios from "axios"
  import Dialog from "../components/knowDialog.vue"
  import Qs from 'qs'
  export default {
    data() {
      aid:localStorage.getItem("aId")
      return {
        aid:localStorage.getItem("aId"),
        //需要给分页组件传的信息
        paginations: {
          page_index: 1, // 当前位于哪页
          total: 0, // 总数
          page_size: 5, // 1页显示多少条
          page_sizes: [5, 10, 15, 20], //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
        },
        allTableData: [],
        input: '',
        index: 0,
        info: [],
        formData: {
          id: '',
          Intitle: '',
          ChXin: ''
        },
        dialog: {
          show: false,
          title: '',//添加 编辑
          option: 'edit'
        }
      }
    },
    mounted() {
      this.judge();
      var _this = this;
      axios.get("http://localhost:3000/api/knowofpet")
        .then(res => {
          console.log("获取数据成功");
          console.log(res);
          // _this.info = res.data;
          // 设置分页数据
          _this.allTableData = res.data;
          _this.setPaginations();

          console.log(_this.info)

        })
        .catch(err => {
          console.log('获取数据失败' + err);
        })

    },
    components: {
      Dialog
    },
    methods: {
      judge(){
            if(!this.aid){
                this.$message({
                type:'error',
                message:'请先登录'
              })
              this.$router.push({path:'/adlog'});
            }
        },
      handleEdit(index, row) {
        // console.log(123);bianji
        this.dialog = {
          show: true,
          title: '修改信息',
          option: 'edit'
        };
        this.formData = {
          Intitle: row.knowtitle,
          ChXin: row.know,
          id: row.kid
        }


      },
      handleDelete(index, row) {
        // console.log(456)
        var flag=confirm("确定要删除这条内容吗？")
          if(flag){
        this.axios({
          method: 'post',
          url: 'http://127.0.0.1:3000/api/postknow/delete',
          // headers:{
          //    'Content_type':'application/x-www-form-urlencoded'
          // },
          data: {

            kid: row.kid
          }
        })
          .then(res => {
            this.$message({
              message: '成功',
              type: 'success',

            })
            this.dialog.show = false;
            console.log(this.formData);

            this.$router.go(0);
          })
          .catch(err => {
            console.log(err)
          })
        }

      },
      handleAdd() {
        // console.log(786)
        this.dialog = {
          show: true,
          title: '添加信息',
          option: 'add'
        };
        this.formData = {
          Intitle: '',
          ChXin: ''
        };
        this.dialog.show = true;

      },
      search() {
        let _this = this;
        if (_this.input == '') {
          console.log('搜索空字符');
          _this.$router.go(0);
        }
        else {

          console.log('搜索' + _this.input);
          let a = _this.allTableData.filter(v => {
            return JSON.stringify(v.know).indexOf(_this.input) !== -1;
          });
          console.log(a);
          _this.allTableData = a;
          // 分页数据  
          _this.setPaginations();
        }

      },

      handleCurrentChange(page) {
        // 当前页
        let sortnum = this.paginations.page_size * (page - 1);
        let table = this.allTableData.filter((item, index) => {
          return index >= sortnum;
        });
        // 设置默认分页数据
        this.info = table.filter((item, index) => {
          return index < this.paginations.page_size;
        });
      },
      handleSizeChange(page_size) {
        // 切换size
        this.paginations.page_index = 1;
        this.paginations.page_size = page_size;
        this.info = this.allTableData.filter((item, index) => {
          return index < page_size;
        });
      },
      setPaginations() {
        // 总页数
        this.paginations.total = this.allTableData.length;
        this.paginations.page_index = 1;
        this.paginations.page_size = 5;
        // 设置默认分页数据
        this.info = this.allTableData.filter((item, index) => {
          return index < this.paginations.page_size;
        });
      },


    }

  }
</script>

<style scoped>
  .fillContainer {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .btnRight {
    float: right;
  }

  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  .user-input {
    width: 90%;
    height: 100%;
    border: 2px solid rgba(0, 123, 255, 0.874);
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    text-indent: 10%;
    font-size: 150%;
    font-family: 楷体;
  }

  .user-btn {
    width: 40%;
    height: 90%;
    border: none;
    border-radius: 5px;
    background: rgba(0, 123, 255, 0.874);
    vertical-align: middle;
    outline: none;
    color: white;
    font-size: 160%;
    font-family: 楷体;
  }

  #search {
    display: flex;
    width: 40%;
    margin-top: 1%;
  }
</style>